<template>
  <div ref="echart"></div>
</template>

<script>
import echarts from "echarts";
export default {
  props: {
    // 接收父组件传的值
    chartData: {
      type: Object,
      default() {
        return {
          xData: [],
          series: [],
          extra: {},
        };
      },
    },
    // 父组件传值判断是否有坐标轴
    isAxisChart: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    // 通过该计算属性判断显示的图标是否是有坐标轴
    options() {
      return this.isAxisChart ? this.axisOption : this.normalOption;
    },
  },
  data() {
    return {
      echart: null,
      // 有坐标轴
      axisOption: {
        legend: {
          textStyle: {
            // color: ['#0f78f4', '#dd536b', '#9462e5', '#a6a6a6', '#e1bb22', '#39c362', '#3ed1cf']
            color: "#333",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "",
          },
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            data: [],
            axisLine: {
              onZero: false,
              lineStyle: {
                color: "#333",
              },
            },
            axisLabel: {
              color: "#333",
            },
          },
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            data: [],
            axisLine: {
              onZero: false,
              lineStyle: {
                color: "#333",
              },
            },
            axisLabel: {
              color: "#333",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#333",
              },
            },
          },
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#333",
              },
            },
          },
        ],
        color: [],
        series: [],
        grid: {
          left: "12%",
          right: "15%",
          // containLabel: true
        },
      },
      // 无坐标轴
      normalOption: {
        tooltip: {
          trigger: "item",
        },
        color: [
          "#0f78f4",
          "#dd536b",
          "#9462e5",
          "#a6a6a6",
          "#e1bb22",
          "#39c362",
          "#3ed1cf",
        ],
        series: [],
      },
    };
  },
  watch: {
    // 对象开启深度监听
    chartData: {
      handler: function() {
        this.initChart();
      },
      deep: true,
    },
  },
  methods: {
    // 初始化容器
    initChart() {
      // 先渲染数据
      this.initChartData();
      if (this.echart) {
        this.echart.setOption(this.options);
      } else {
        this.echart = echarts.init(this.$refs.echart);
        this.echart.setOption(this.options);
      }
    },
    // 加载数据
    initChartData() {
      if (this.isAxisChart) {
        this.axisOption.xAxis = this.chartData.xData;
        // 设置图的颜色
        this.axisOption.color = this.chartData.extra.color;
        // 设置鼠标十字标识
        this.axisOption.tooltip.axisPointer.type = this.chartData.extra.axisPointer;
        this.axisOption.series = this.chartData.series;
      } else {
        this.normalOption.series = this.chartData.series;
      }
    },
    // 页面刷新调整窗口
    resizeChart() {
      this.echart ? this.echart.resize() : "";
    },
  },
  mounted() {
    // 就目前来说，数据暂时不会改变所以一开始的深度监听就不会生效
    // 所以需要手动调用一下初始化方法
    this.initChart();
    window.addEventListener("resize", this.resizeChart);
  },
  destroyed() {
    window.removeEventListener("resize", this.resizeChart);
  },
};
</script>

<style scoped></style>
